<!DOCTYPE html>
<html lang="en">

<head>
    <title>THREE-SKY</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- <link type="text/css" rel="stylesheet" href="main.css"> -->
    <link rel="icon" href="/src/assets/k.ico">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #fff;
            color: #444;
        }

        a {
            color: #08f;
        }
    </style>
</head>

<body>
    <div id="info">
    </div>

    <!-- Import maps polyfill -->
    <!-- Remove this when import maps will be widely supported -->

    <script type="importmap">
			{
				"imports": {
                    "three": "../../node_modules/three/build/three.module.js"
                }
			}
		</script>


    <script type="module">

        import * as THREE from 'three';
        import { OrbitControls } from '../../node_modules/three/examples/jsm/controls/OrbitControls.js'
        import { PointerLockControls } from '../../node_modules/three/examples/jsm/controls/PointerLockControls.js';
        let SCREEN_WIDTH = window.innerWidth;
        let SCREEN_HEIGHT = window.innerHeight;

        let container, stats;
        var camera, scene, renderer;
        let cameraControls;
        let controls;

        let prevTime = performance.now();
        let moveForward = false;
        let moveBackward = false;
        let moveLeft = false;
        let moveRight = false;

        const velocity = new THREE.Vector3();
        const direction = new THREE.Vector3();
        const vertex = new THREE.Vector3();
        const color = new THREE.Color();


        init();
        animate();

        function init() {
            container = document.createElement('div');
            document.body.appendChild(container);
            // CAMERA
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
            camera.position.set(3000, 100, 0);
            camera.lookAt(0, 0, 0);
            // SCENE
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xffffff);
            scene.fog = new THREE.Fog(0xffffff, 1000, 4000);
            scene.add(camera);

            // LIGHTS
            scene.add(new THREE.AmbientLight(0x222222));
            const light = new THREE.DirectionalLight(0xffffff, 2.25);
            light.position.set(200, 450, 500);
            light.castShadow = true;
            light.shadow.mapSize.width = 1024;
            light.shadow.mapSize.height = 512;
            light.shadow.camera.near = 100;
            light.shadow.camera.far = 1200;
            light.shadow.camera.left = - 1000;
            light.shadow.camera.right = 1000;
            light.shadow.camera.top = 350;
            light.shadow.camera.bottom = - 350;
            scene.add(light);
            //  GROUND

            const axesHelper = new THREE.AxesHelper(10000);
            scene.add(axesHelper);

            const size = 10000;
            const divisions = 200;

            const gridHelper = new THREE.GridHelper(size, divisions, 0xff4400, 0x000000);
            scene.add(gridHelper);

            // RENDERER
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
            container.appendChild(renderer.domElement);
            document.addEventListener('resize', onWindowResize);

            document.addEventListener('keydown', onKeyDown);
            document.addEventListener('keyup', onKeyUp);

            controls = new PointerLockControls(camera, document.body);
            scene.add(controls.getObject());

            // cameraControls = new OrbitControls(camera, renderer.domElement);
            // cameraControls.enableRotate = true;
            // // 限制旋转最大角度
            // cameraControls.maxPolarAngle = 4 / Math.PI;
            // // cameraControls.minPolarAngle = 4 / Math.PI;
            // cameraControls.target.set(0, 50, 0);
            // cameraControls.update();
        }

        function onWindowResize() {
            SCREEN_WIDTH = window.innerWidth;
            SCREEN_HEIGHT = window.innerHeight;
            renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
            camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
            camera.updateProjectionMatrix();
        }



        function onKeyDown(event) {
            switch (event.code) {
                case 'ArrowUp':
                case 'KeyW':
                    moveForward = true;
                    break;
                case 'ArrowLeft':
                case 'KeyA':
                    moveLeft = true;
                    break;
                case 'ArrowDown':
                case 'KeyS':
                    moveBackward = true;
                    break;
                case 'ArrowRight':
                case 'KeyD':
                    moveRight = true;
                    break;
            }

        };

        function onKeyUp(event) {
            switch (event.code) {
                case 'ArrowUp':
                case 'KeyW':
                    moveForward = false;
                    break;
                case 'ArrowLeft':
                case 'KeyA':
                    moveLeft = false;
                    break;
                case 'ArrowDown':
                case 'KeyS':
                    moveBackward = false;
                    break;
                case 'ArrowRight':
                case 'KeyD':
                    moveRight = false;
                    break;
            }

        };

        function animate() {
            requestAnimationFrame(animate);
            const time = performance.now();

            const delta = (time - prevTime) / 1000;

            velocity.x -= velocity.x * 10.0 * delta;
            velocity.z -= velocity.z * 10.0 * delta;
            velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass
            direction.z = Number(moveForward) - Number(moveBackward);
            direction.x = Number(moveRight) - Number(moveLeft);
            direction.normalize(); // this ensures consistent movements in all directions

            if (moveForward || moveBackward) velocity.z -= direction.z * 400.0 * delta;
            if (moveLeft || moveRight) velocity.x -= direction.x * 400.0 * delta;

            controls.moveRight(- velocity.x * delta);
            controls.moveForward(- velocity.z * delta);

            controls.getObject().position.y += (velocity.y * delta); // new behavior

            if (controls.getObject().position.y < 10) {

                velocity.y = 0;
                controls.getObject().position.y = 10;

            }
            prevTime = time;
            render();
        }

        function render() {
            renderer.render(scene, camera);
        }
    </script>

</body>

</html>